<template>
<div id="scen1">
    <ul class="tab-tit">
        <li v-for="(m,num) in tabs" v-bind:key="num" @click= "cur=num" :class="{active:cur==num} ">
            {{m.title}}</li>
    </ul>
    <div class="tab-content" v-for="(n,num) in tabMain" :key="num" v-show="cur==num">
            <div class="content-article">{{n.content}}</div>
            <img :src="n.imgurl" alt="">
    </div>
</div>
</template>
 <script type="text/javascript">
 import axios from 'axios';
     export default {
       
           name:'Product',
           
            // data(){
            //     return{
            //         tabs: ['鸡', '鹅', '牛'],
            //     tabMain: [{
            //         imgurl:'http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg',
            //         content:'产品一：呆头鹅'
            //     },
            //     {
            //         imgurl:'http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg',
            //         content:'产品二：蹦蹦鸡'
            //     },
            //     {
            //         imgurl:'http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg',
            //         content:'蠢蠢牛'
            //     }
            //     ],
            //     cur: 0 //默认选中第一个tab
            //     }
            // }
            data(){
                return{
                   tabs:[],
                   tabMain:[],
                   cur:0
                }
            },
            methods:{
                getProduct(){
                    axios({
                        method:'get',
                        url:'/infor'
                    }).then((res)=>{
                        console.log(res.data.product.tabs);
                        this.tabs=res.data.product.tabs;
                        this.tabMain= res.data.product.tabMain;
                        this.cur = res.data.product.cur
                    }).catch((err)=>{
                        console.log('产品异常',err)
                    })
                }
            },
            created:function(){
                this.getProduct();
            }
    }
    </script>
    <style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    #scen1{
        margin: 0 30px;
    }
    .content-article{
        text-align: left;
        text-indent: 2em;
            margin: 3em 0;
    }
    .tab-tit{
        display :flex;
    }
    li{
        flex: 1;
        list-style-type: none;
        background-color: rgba(35, 134, 180, 0.3);
    }
    .active{
        background-color: rgba(35, 134, 180, 0.7);
    }
    </style>